<template>
	<view id="login">
		<view class="container">
			<view class="center-icon">
				<image class="" src="../../static/logo.png" mode="widthFix" />
			</view>
			<view class="wrapper">
				<view class="input-content">
					<view class="input-item">
						<input type="number" v-model="username" placeholder="请输入用户名" @input="clearInput"/>
						<i class="iconfont icon-close-circle" v-if="showClearIcon" @click="clearIcon"></i>
					</view>
					<view class="input-item">
						<input v-model="password" :password="showPassword"  @keydown.enter="bindLogin" placeholder="请输入密码" maxlength="20" />
						<i :class="[!showPassword ?'iconfont icon-eye-open':'iconfont icon-eye-close']" @click="changePassword"></i>
					</view>
					<view class="rememberPassword">
						<u-checkbox active-color="#39ACFF"  v-model="checked" label-size="25rpx">是否记住密码？</u-checkbox>
					</view>
					<button class="confirm-btn" @click="bindLogin">登录</button>
				</view>
				<view class="register-section" style="color:#888">
					没有账号？现在<text style="color:#39ACFF;text-decoration:underline" @tap="navTo('/pages/common/register')">注 册</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	export default {
		data() {
			return {
				username: '',
				password: '',
				inputClearValue:'',
				checked: true,
				showClearIcon: false,
				showPassword:true,
				jgid:''
			}
		},
		onLaunch() {
			
		},
		onLoad:function() {
			// #ifdef APP-PLUS
			const jyJPush = uni.requireNativePlugin('JY-JPush');
			jyJPush.getRegistrationID(result => {
				if(result.errorCode==0){
					this.jgid=result.registrationID
				}
			});
			// #endif
			
		},
		mounted() {
			this.username=uni.getStorageSync('username')||''
			this.password=uni.getStorageSync('password')||''
		},
		methods: {
			navTo(item) {
				uni.navigateTo({
					url: item
				})
			},
			clearInput: function(event) {
				this.username = event.detail.value;
				if(event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.username = '';
				this.showClearIcon = false;
			},
			changePassword: function(e) {
				console.info(e)
				this.showPassword = !this.showPassword;
			},
			bindLogin() {
				let that = this;
				if (!this.username) {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请输入用户名'
					});
					return
				}else{
					if (!this.password) {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							title: '请输入密码'
						});
						return
					}
				}
				this.httpClient.postJson('auth/login', {
					username: this.username,
					password: this.password,
					uuid:'07215f3ced1e468fbb151ba9bcd0c149',
					code:'0',
					flag: "agent_pc", 
					jgid:this.jgid
				}).then(res => {
					if (res.code == 200) {
						if(this.checked){
							uni.setStorageSync('username',this.username)
							uni.setStorageSync('password',this.password)
						}else{
							uni.clearStorageSync('username')
							uni.clearStorageSync('password')
						}
						uni.setStorageSync('access_token',res.data.access_token)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	#login {
		height: 100%;
		background: #FFFFFF;
		
		.center-icon{
			width:100%;text-align: center;padding-top:100rpx;
			image{
				width:250rpx;
			}
		}
		 
		.confirm-btn {
			margin-top: 100upx;
			height: 90upx;
			line-height: 90upx;
			color: #FFFFFF;
			background: $uni-color-primary;
		}
		.container {
			padding-top: 120upx;
			position: relative;
			width: 100vw;
			overflow: hidden;
			background: #fff;
		
			.wrapper {
				position: relative;
				z-index: 90;
				background: #fff;
				padding: 50rpx 0;
			}
			
			
			
			.input-content {
				padding: 0 30upx;
			}
			.rememberPassword{
				padding: 0 30upx;
			}
			.input-item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				padding: 0 30upx;
				// background: $page-color-light;
				border-bottom: 1px solid #f8f8f8;
				height: 100upx;
				// border-radius: 4px;
				margin-bottom: 30upx;
		
				&:last-child {
					margin-bottom: 0;
				}
				input {
					height: 60upx;
					font-size: 28rpx;
					width: 100%;
				}
				.iconfont{
					position: absolute;right:40rpx;color:#aaa;font-size:36rpx;
				}
			}
		}
		.register-section {
			margin: 50upx 0 50upx 0;
			width: 100%;
			text-align: center;
		
			text {
				margin-left: 10upx;
				margin-right: 10upx;
			}
		}
	}
	
</style>